<template>
  <div class="emotion-index-content">
    <div class="top flex-between">
      <div class="p-name flex-start">
        <p>当前情感指数</p>
        <span>{{props.data.qgfxIndex}}</span>
      </div>
      <div class="p-rate flex items-center">
        <span>环比</span>
        <p class="num">
          <span class="icon-huan-up" v-if="props.data.qgfxRatex>0"></span>
          <span class="icon-huan-down" v-else></span>
          <span class="rate">{{Math.abs(props.data.qgfxRatex)}}%</span>
        </p>
      </div>
    </div>
    <div class="echart-title flex items-center">
      <span class="icon"></span>
      近30日情感指数变化
    </div>
    <div class="emotion-echart" v-if="props.data.trendTable" id="emotion-line-echart">

    </div>
    <div class="no-data" v-else>
      暂无近30日情感指数变化
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, nextTick, onMounted } from 'vue'
import { emotionIndexLineChart } from "./echart.js"

defineOptions({
  name: 'EmotionIndex'
})

const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
})
watch(
  () => props.data,
  (val) => {
    nextTick(() => {
      if(val.trendTable)
      emotionIndexLineChart("emotion-line-echart",val.trendTable)
    })
  }
);
</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.emotion-index-content{
  height: 220px;
  background: #fff;
  color: #212121;
  border-radius: 5px;
  box-shadow: 0px 2px 10px 0px #0000000C;
  padding: 14px 13px 14px;
  margin: 9px 10px 0;
  font-size: 14px;
  .top{
    padding:0 0 14px 0;
    border-bottom: 1px solid #D8E4F5;
    .p-name{
      font-weight: bold;
      font-size: 14px;
      span{
        font-family: 'DINPro';
        font-weight: bold;
        font-size: 20px;
        margin-left: 7px;
      }
    }
    .p-rate{
      font-size: 11px;
      .num{
        margin-left: 7px;
      }
      .rate{
        color: #272B33;
        font-size: 14px;
      }
    }
  }
  .echart-title{
    color: #212121;
    font-size: 13px;
    padding: 12px 0;
    .icon{
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #3D76CC;
      margin-right: 4px;
    }
  }
  .emotion-echart{
    width: 100%;
    height: 155px;
  }
  .no-data{
    height: 155px;
    text-align: center;
    line-height: 155px;
    color: #c2c2c2;
  }
}
</style>

